<template>
    <div class="flex relative fit-width" @mouseenter="conf.btn.show = true" @mouseleave="conf.btn.show = false">
        <div class="code fit-width" v-html="htmlStr()"></div>
        <div
            class="absolute code-copy-btn flex flex-center"
            :style="{ opacity: conf.btn.show ? 1 : 0 }"
            @click="conf.copy"
        >
            复制
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'

const props = defineProps({
    code: { default: '' }
})

const div = document.createElement('div')

const conf = reactive({
    btn: {
        show: false
    },
    copy() {
        StrUtil.copyText(props.code)
    }
})

const htmlStr = () => {
    div.textContent = props.code
    return div.innerHTML.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;').replace(/	/g, '&nbsp;&nbsp;&nbsp;&nbsp;')
}

</script>
<style lang="less" scoped></style>
